<template>
    <div class="login-wrap">
        <el-form
            label-position="left"
            :model="user"
            :rules="rules"
            ref="user"
            label-width="0px"
            class="demo-user login-container"
        >
            <h3 class="title">登录</h3>
            <el-form-item prop="account">
                <el-input
                    type="text"
                    v-model="user.account"
                    auto-complete="off"
                    placeholder="账号"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                    type="password"
                    v-model="user.password"
                    auto-complete="off"
                    placeholder="密码"
                ></el-input>
            </el-form-item>
            <el-radio-group v-model="user.radio">
                <el-radio label="用户">用户</el-radio>
                <el-radio label="出租方">出租方</el-radio>
                <el-radio label="管理员">管理员</el-radio>
            </el-radio-group>
            <br />
            <template>
                <div class="box">
                    <el-checkbox class="remember" v-model="rememberpwd" checked>
                        记住密码
                    </el-checkbox>
                    <router-link to="/register" id="to">
                        没有账户？注册账号</router-link
                    >
                </div>
            </template>
            <el-form-item style="width: 100%">
                <el-button
                    type="primary"
                    style="width: 100%"
                    @click="loginBt()"
                    :loading="logining"
                    >{{ user.radio }} 登录</el-button
                >
            </el-form-item>
            <!-- label前不加: -->
        </el-form>
    </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions: mapActions, mapState: mapState } = createNamespacedHelpers(
    "login"
);

export default {
    data() {
        return {
            //定义loading默认为false
            logining: false,
            // 记住密码
            rememberpwd: false,
            user: {
                //account和password默认为空
                account: "",
                password: "",
                code: "",
                randomStr: "",
                codeimg: "",
                radio: "管理员",
            },
            //rules前端验证
            rules: {
                account: [
                    { required: true, message: "请输入账号", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
                code: [
                    {
                        required: true,
                        message: "请输入验证码",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    // 创建完毕状态(里面是操作)
    created() {
        this.$message({
            message: "账号密码不为空即可",
            type: "success",
        });
    },
    // 里面的函数只有调用才会执行
    computed: {
        ...mapState(["_id"]),
    },
    methods: {
        ...mapActions(["login"]),
        async loginBt() {
            const data = await this.login(this.user);
            // console.log(data);
            /***************练超开始************/
            if (data.status) {
                localStorage.userType = this.user.radio; //将登录者类型保存到本地存储
                localStorage._id = this._id; //将登录者的id保存到本地存储
                localStorage.token = data.token;

                switch (this.user.radio) {
                    case "管理员":
                        if (data.data[0].state == 1) {
                            alert("管理员登录成功");
                            this.$router.push("/system");
                        } else {
                            alert("您的管理员身份已被禁用，请联系超级管理员");
                        }
                        break;

                    case "出租方":
                        if (data.data[0].state == 1) {
                            alert("出租方登录成功");
                            this.$router.push("/system");
                        } else {
                            alert("您的出租权限已被禁用，请联系管理员");
                        }
                        break;

                    case "用户":
                        if (data.data[0].state) {
                            alert("用户登录成功");
                            /********调转到用户登录路由（个人项目****************/
                            // this.$router.push("/个人项目路由");
                        }
                        break;
                }
            } else {
                alert(`${this.user.radio}登录失败,账号或密码错误`);
            }
            /****************练超结束******************/
        },
    },
};
</script>

<style scoped>
.login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url();
    /* background-color: #112346; */
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
}
.login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
.remember {
    margin: 0px 0px 35px 0px;
}
#to {
    font-size: 14px;
    margin-left: 120px;
    color: #339999;
}
.box {
    margin-top: 10px;
}
</style>